<script setup>
import {ref, onMounted} from 'vue';
import {Map, View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from "ol/source/XYZ";
import {defaults as defaultControls, FullScreen, OverviewMap} from 'ol/control'
const map = ref(null);

const initMap = ()=>{
  map.value = new Map({
    target: 'map',
    layers: [
        new TileLayer({
          source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69",
          }),
        })
    ],
    controls: defaultControls({
      zoom: false//禁用右上角缩放组件
    }),

    view: new View({
      center: [113.24981689453125, 23.126468438108688], //视图中心位置
      projection: 'EPSG:4326',
      zoom: 13,
    })
  })
  addFullScreen()
}

const addFullScreen = ()=>{
  const fullScreen = new FullScreen({ tipLabel:"全屏",});
  map.value.addControl(fullScreen);
}

onMounted(initMap)
</script>

<template>
  <div id="map">
  </div>
</template>

<style scoped>
#map{
  width: 100%;
  height: 100%;
  position: relative;
}
</style>